<template>
    <page-box class="home">
        <template v-slot:header>
            <ask-breadcrumb>
                <ask-breadcrumb-item
                    >{{ userInfo.name }}，{{
                        helloTxt
                    }}&nbsp;&nbsp;&nbsp;&nbsp;{{ timeTxt }}</ask-breadcrumb-item
                >
            </ask-breadcrumb>
        </template>
        <div class="wrap">
            <div>
                <div class="no-data">
                    <el-input
                        placeholder=""
                        v-model="townSearchValue"
                        @keyup.enter.native="handleHeaderSearch"
                        class="search-input"
                        clearable
                        size="large"
                    >
                        <el-button slot="append" @click="handleHeaderSearch"
                        >全 镇 检 索</el-button
                        >
                    </el-input>
                </div>
                <div class="info-view">
                    <p>信息展示</p>
                    <ul>
                        <li>
                            <div @click="handleRouteJump('TownReceivedList')">
                                <span>今日上报数据<i></i></span>
                                <p>
                                    <img
                                        src="@/assets/home/shangbao.png"
                                        alt=""
                                    />
                                    {{ dataList.todayForm || 0 }}
                                </p>
                            </div>
                        </li>
                        <li>
                            <div @click="handleRouteJump('TownReceivedList')">
                                <span>待审批任务<i></i></span>
                                <p>
                                    <img
                                        src="@/assets/home/daishenpi.png"
                                        alt=""
                                    />
                                    {{ dataList.processNumNoFinish || 0 }}
                                </p>
                            </div>
                        </li>
                        <li>
                            <div @click="handleRouteJump('ProjectList')">
                                <span>项目总数<i></i></span>
                                <p>
                                    <img
                                        src="@/assets/home/project-count.png"
                                        alt=""
                                    />
                                    {{ dataList.projectNum || 0 }}
                                </p>
                            </div>
                        </li>
                        <li>
                            <div @click="handleRouteJump('DataRetrievalIndex')">
                                <span>资源分类<i></i></span>
                                <p>
                                    <img
                                        src="@/assets/home/calssfiy.png"
                                        alt=""
                                    />
                                    {{ dataList.resourceTypeNum || 0 }}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="list">
                    <p>快捷访问</p>
                    <ul>
                        <li
                            @click="handleFastItemClick('TownModuleManageForm')"
                        >
                            <img src="@/assets/home/create-from.png" alt="" />
                            <span>创建表单</span>
                            <p>科室</p>
                        </li>
                        <li
                            @click="handleFastItemClick('TownModuleManageHome')"
                        >
                            <img src="@/assets/home/xiafa.png" alt="" />
                            <span>下发任务</span>
                            <p>科室</p>
                        </li>
                        <li>
                            <img src="@/assets/home/no-s.png" alt="" />
                            <span>数据填报</span>
                            <p>网格或村</p>
                        </li>
                        <li @click="handleFastItemClick('TownReceivedList')">
                            <img src="@/assets/home/data-shenhe.png" alt="" />
                            <span>数据审核</span>
                            <p>科室</p>
                        </li>
                        <li @click="handleFastItemClick('DataRetrievalIndex')">
                            <img src="@/assets/home/data-serach.png" alt="" />
                            <span>数据检索</span>
                            <p>科室</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right-content">
                <div class="collect" v-loading="loading">
                    <div class="collect-header">
                        <p>全镇数据采集动态</p>
                        <!--                    <el-input-->
                        <!--                        placeholder="输入表单名称搜索"-->
                        <!--                        suffix-icon="el-input__icon el-icon-search"-->
                        <!--                        v-model="searchName"-->
                        <!--                        @change="handleSearch"-->
                        <!--                    >-->
                        <!--                    </el-input>-->
                        <el-select
                            v-model="status"
                            placeholder="请选择任务状态"
                            @change="handleSearch"
                            popper-class="select-status"
                            clearable
                        >
                            <el-option value="2" label="已完成"></el-option>
                            <el-option value="1" label="进行中"></el-option>
                        </el-select>
                    </div>
                    <div class="collect-content">
                        <ask-empty-text v-if="NewList.length === 0">
                        </ask-empty-text>
                        <ul v-else>
                            <li v-for="(item, index) in NewList" :key="index">
                                <div>
                                    <p>{{ item.time }}</p>
                                    <el-timeline>
                                        <el-timeline-item
                                            v-for="(activity, i) in item.list"
                                            :key="i"
                                            placement="bottom"
                                        >
                                        <span
                                            class="title-name"
                                            :title="activity.formName"
                                            @click="toTaskList(activity)"
                                        >【{{ activity.formName }}】</span
                                        >
                                            <span
                                                style="color: rgb(50, 167, 143)"
                                                v-if="activity.fillStatus === 2"
                                            >已完成</span
                                            >
                                            <span
                                                style="color: #f3c14f"
                                                v-if="activity.fillStatus === 1"
                                            >进行中</span
                                            >
                                            <i>{{ activity.creator }}</i>
                                        </el-timeline-item>
                                    </el-timeline>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="collect-footer">
                        <el-pagination
                            v-if="total > 0"
                            layout="prev, pager, next"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            @current-change="handleCurrentChange"
                            :total="total"
                        >
                        </el-pagination>
                    </div>
                </div>
                <div class="tips-list">
                    <div class="tip-header">全镇资源动态更新提醒</div>
                    <div class="tips-list-content">
                        <div class="item" v-for="item in tipsList" :key="item.id">
                            <div class="top">
                                <span class="name">{{item.businessName}}更新</span>
                                <template v-if="item.finished">
                                    <i class="el-icon-success" style="color: #32a78f;font-size: 20px;"></i>
                                </template>
                                <template v-else-if="userInfo.id === item.reminder">
                                    <el-checkbox v-model="item.finished" @change="finishTip(item)"></el-checkbox>
                                </template>
                            </div>
                            <div class="bottom">
                                <div class="people">
                                    <span>{{ item.reminderDepartment }}</span>
                                    <span>执行人：{{item.reminderName}}</span>
                                </div>
                                <div class="time">提醒日期：{{item.createTime}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="e-charts-container">
            <page-search>
                <page-search-column class="fixed-column">
                    <page-search-item>
                        <el-tabs
                            v-model="activeName"
                            @tab-click="handleTabClick"
                            class="date-select"
                        >
                            <el-tab-pane label="今天" name="1" />
                            <el-tab-pane label="昨天" name="2" />
                            <el-tab-pane label="最近一周" name="3" />
                            <el-tab-pane label="最近一个月" name="4" />
                        </el-tabs>
                    </page-search-item>
                    <page-search-item>
                        <el-date-picker
                            class="pbb__search-input date"
                            v-model="form.createTime"
                            type="daterange"
                            @change="handleTime"
                            range-separator="~"
                            start-placeholder="开始创建日期"
                            :clearable="false"
                            end-placeholder="结束创建日期"
                        >
                        </el-date-picker>
                    </page-search-item>
                </page-search-column>
            </page-search>
            <div class="e-chart-box">
                <div class="mission-rank">
                    <!-- <p class="e-c-b-title">本科室任务数排名</p> -->
                    <div class="e-chart" ref="missionRank"></div>
                </div>
                <div class="mission-statistics">
                    <!-- <p class="e-c-b-title">本科室任务统计</p> -->
                    <div>
                        <div
                            class="e-chart"
                            ref="missionStatistics"
                            v-show="taskStatistic"
                        ></div>
                        <div v-if="taskStatistic">
                            <p>任务数：{{ taskStatistic.total }}条</p>
                            <p>进行中：{{ taskStatistic.incomplete }}条</p>
                            <p>已完成：{{ taskStatistic.complete }}条</p>
                        </div>
                    </div>
                </div>
                <div class="amount-rank">
                    <!-- <p class="e-c-b-title">
                        本科室数据量排名<span>仅统计已完成任务数据</span>
                    </p> -->
                    <div class="e-chart" ref="amountRank"></div>
                </div>
            </div>
            <p class="title">任务完成详情</p>
            <div class="overview-table-box">
                <el-table
                    border
                    ref="multipleTable"
                    :data="tableData"
                    class="pbb__table"
                    header-cell-class-name="pbb__table-thead"
                    cell-class-name="pbb__table-thead-cell"
                    row-class-name="pbb__table-thead-row"
                    style="
                        width: 100%;
                        height: calc(100% - 58px);
                        overflow-y: auto;
                    "
                >
                    <el-table-column
                        label="排名"
                        align="center"
                        type="index"
                        width="60"
                    >
                    </el-table-column>
                    <el-table-column label="姓名" prop="name">
                    </el-table-column>
                    <el-table-column label="完成任务数(条) " prop="complete">
                    </el-table-column>
                    <el-table-column prop="incomplete">
                        <template slot="header">
                            进行中任务数(条)
                            <el-popover
                                popper-class="overview-warning-popover"
                                placement="top-start"
                                trigger="hover"
                                content="当前时间仍未完成的任务"
                                :visible-arrow="false"
                            >
                                <i class="el-icon-warning" slot="reference"></i>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="采集数据-已完成任务(条)"
                        prop="data"
                    >
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import { State } from "vuex-class";
import FastList from "./components/fast-list/index.vue";
import EchartsMixin from "@/mixins/echarts.mixin";
import dayjs from "dayjs";
import { localStorage } from "@/utils";

interface UnknownData {
    [propsName: string]: any;
}

@Component({
    name: "HomeNotAlive",
    components: {
        FastList
    }
})
export default class Home extends Mixins(EchartsMixin) {
    @State(state => state.user.userInfo) userInfo: any;
    @State(state => state.collectList) collectList: any;
    @State(state => state.authArea) authArea: any;

    dataList = {
        dwdList: [],
        processNumNoFinish: 0,
        projectNum: 0,
        resourceTypeNum: 0,
        todayForm: 0
    };

    searchName = "";
    status = "";
    loading = false;

    list: any[] = [];
    total = 0;
    currentPage = 1;
    pageSize = 10;

    tableData: UnknownData[] = [];
    dataRanking: UnknownData[] = [];
    taskRanking: UnknownData[] = [];
    taskStatistic: UnknownData[] = [];
    townSearchValue = '';
    tipsList: any[] = []

    get helloTxt() {
        const now = new Date();
        const hour = now.getHours();
        if (hour < 6) {
            return "凌晨好！";
        } else if (hour < 9) {
            return "早上好！";
        } else if (hour < 12) {
            return "上午好！";
        } else if (hour < 14) {
            return "中午好！";
        } else if (hour < 17) {
            return "下午好！";
        } else if (hour < 19) {
            return "傍晚好！";
        } else if (hour < 22) {
            return "晚上好！";
        }
    }

    get timeTxt() {
        const time = new Date();
        return `今天是${time.getFullYear()}年${time.getMonth() +
            1}月${time.getDate()}日`;
    }

    get NewList() {
        const arr: any[] = [];
        const setList = this.list[0];
        if (setList) {
            Object.entries(setList).forEach((item: any) => {
                arr.push({
                    time: item[0],
                    list: item[1]
                });
            });
        }
        return arr;
    }

    handleFastItemClick(item: any) {
        this.$router.push({ name: item });
    }

    handleRouteJump(name: any) {
        this.$router.push({
            name: name
        });
    }

    created() {
        this.getPageData();
        this.getChart();
        this.getTable();
        this.getTipsList();
    }

    handleHeaderSearch() {
        this.$router.push({
            name: "SearchTask",
            query: {
                name: this.townSearchValue
            }
        });
    }

    async getTipsList() {
        const res = await this.$server["home/tipsList"]({
            data: {
                cityCode: this.authArea.cityCode
            }
        });
        if (res.data.code === 200) {
            this.tipsList = res.data.data || [];
        }
    }

    async finishTip(item: any) {
        const res = await this.$server["home/finishTip"]({
            data: {
                id: item.id
            }
        });
        if (res.data.code === 200) {
            this.$message.success('操作成功');
        }
    }

    // 获取页面的数据
    async getPageData() {
        const res = await this.$server["Overview/getOverViewData"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.dataList = res.data.data;
        }

        const result = await this.$server["Overview/processList"]({
            data: {
                currentPage: 1,
                pageSize: 10,
                formName: ""
            }
        });
        if (result.data.code === 200) {
            this.list = result.data.data.records;
            this.total = result.data.data.total;
        }
    }

    async handleCurrentChange(val: any) {
        this.loading = true;
        const data: any = {
            currentPage: val,
            pageSize: 10,
            formName: ""
        };
        if (this.status) {
            data.status = Number(this.status);
        }
        const result = await this.$server["Overview/processList"]({
            data,
            loader: false
        });
        if (result.data.code === 200) {
            this.list = result.data.data.records;
            this.total = result.data.data.total;
        }
        this.loading = false;
        this.currentPage = val;
    }

    async handleSearch() {
        this.loading = true;
        const data: any = {
            currentPage: 1,
            pageSize: 10,
            formName: ""
        };
        if (this.status) {
            data.status = Number(this.status);
        }
        const result = await this.$server["Overview/processList"]({
            data,
            loader: false
        });
        if (result.data.code === 200) {
            this.list = result.data.data.records;
            this.total = result.data.data.total;
        }
        this.loading = false;
        this.currentPage = 1;
    }

    formNameStr(item: any) {
        const html = item.message.substring(
            item.message.indexOf("【"),
            item.message.indexOf("】") + 1
        );
        return html;
    }

    handleName(item: any) {
        const html = item.message.substring(item.message.indexOf("】") + 1);
        return html;
    }

    async getChart() {
        let { createTime } = this.form;
        createTime = createTime.map(item => dayjs(item).format("YYYY-MM-DD"));

        try {
            const rs = await this.$server["town/getMultiple"]({
                data: {
                    startTime: createTime[0] || "",
                    endTime: createTime[1] || ""
                }
            });
            this.dataRanking = rs.data.data.dataRanking;
            this.taskRanking = rs.data.data.taskRanking;
            this.taskStatistic = rs.data.data.taskStatistic;
            this.$nextTick(() => {
                this.missionRankChart();
                this.missionStatisticsChart();
                this.amountRankChart();
            });
        } catch (e) {}
    }

    async getTable() {
        let { createTime } = this.form;
        createTime = createTime.map(item => dayjs(item).format("YYYY-MM-DD"));

        try {
            const rs = await this.$server["town/getList"]({
                data: {
                    startTime: createTime[0] || "",
                    endTime: createTime[1] || ""
                }
            });
            this.tableData = rs.data.data;
        } catch (e) {
            console.log(e);
        }
    }

    // mixins中handleTabClick的补充
    handleTabClickExtend(): void {
        this.getChart();
        this.getTable();
    }

    handleTime(): void {
        this.activeName = "";
        this.getChart();
        this.getTable();
    }

    // 任务数排名e-charts数据处理
    missionRankChart(): void {
        const chartData = this.taskRanking;

        const xAxisData: string[] = [];
        const incomplete: UnknownData = {
            name: "进行中",
            key: "incomplete",
            data: [],
            type: "bar",
            stack: "a",
            itemStyle: {
                color: "#2C50C9"
            },
            label: {
                show: true,
                fontSize: 12,
                color: "#fff",
                formatter(item: UnknownData) {
                    return item.data === 0 ? "" : item.data;
                }
            }
        };
        const complete: UnknownData = {
            name: "已完成",
            key: "incomplete",
            data: [],
            type: "bar",
            stack: "a",
            itemStyle: {
                color: "#32A78F"
            },
            label: {
                show: true,
                fontSize: 12,
                color: "#000",
                formatter(item: UnknownData) {
                    return item.data === 0 ? "" : item.data;
                }
            }
        };
        const total: UnknownData = {
            name: "总计",
            key: "total",
            data: [],
            type: "bar",
            stack: "",
            z: -1,
            barGap: "-100%",
            itemStyle: {
                color: "transparent"
            },
            label: {
                show: true,
                position: "top",
                padding: [0, 0, 8, 0],
                color: "#000",
                formatter(item: UnknownData) {
                    return item.data === 0 ? "" : item.data;
                }
            }
        };
        chartData.forEach(item => {
            xAxisData.push(item.name);
            incomplete.data.push(item.incomplete);
            complete.data.push(item.complete);
            total.data.push(item.total);
        });

        const option = {
            title: {
                text: "本科室任务数排名",
                textStyle: {
                    color: "#37383A",
                    fontFamily: "PingFang SC",
                    fontSize: 16,
                    fontWeight: "bold"
                },
                padding: [0, 0, 0, 15]
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ["进行中", "已完成"],
                left: "160",
                top: "0",
                itemWidth: 20,
                itemHeight: 8,
                itemGap: 20,
                textStyle: {
                    color: "#999999",
                    fontSize: 12,
                    fontFamily: " PingFang SC"
                }
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#909399"
                        }
                    },
                    axisLabel: {
                        rotate: 45
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisTick: {
                        // y轴刻度线
                        show: false
                    },
                    splitLine: {
                        // 网格线
                        show: true,
                        lineStyle: {
                            color: "#E4E7ED",
                            opacity: 0.5
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#909399"
                        }
                    }
                }
            ]
        };
        const optionChange = {
            xAxis: [
                {
                    data: xAxisData
                }
            ],
            series: [incomplete, complete, total]
        };

        this.setEcharts(
            "missionRank",
            option,
            optionChange,
            (charts: UnknownData) => {
                charts.on("legendselectchanged", function() {
                    try {
                        const currentOption = charts.getOption();
                        const selected = currentOption.legend[0].selected;
                        let flag = false;
                        if (selected) {
                            flag = Object.values(selected).some(
                                (item: unknown) => item === false
                            );
                        }

                        currentOption.series = currentOption.series.map(
                            (item: UnknownData) => {
                                if (item.key === "total") {
                                    item.label.show = !flag;
                                }
                                return item;
                            }
                        );
                        charts.setOption(currentOption, true);

                        // if (flag) {
                        //     currentOption.series = currentOption.series.filter((item: any) => (item.key !== 'total'));
                        //     charts.setOption(currentOption, true);
                        // } else {
                        //     charts.setOption(merge(true, option, optionChange), true);
                        // }
                    } catch (e) {
                        console.log(e);
                    }
                });
            }
        );
    }

    // 本村任务统计e-charts数据处理
    missionStatisticsChart(): void {
        const chartData: UnknownData = this.taskStatistic;

        const option = {
            title: {
                text: "本科室任务统计",
                textStyle: {
                    color: "#37383A",
                    fontFamily: "PingFang SC",
                    fontSize: 16,
                    fontWeight: "bold"
                },
                padding: [0, 0, 0, 15]
            },
            tooltip: {
                trigger: "item"
            },
            series: [
                {
                    name: "任务状态",
                    type: "pie",
                    radius: ["40%", "70%"],
                    center: ["60%", "50%"],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: "center"
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: "20",
                            fontWeight: "bold"
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }
            ]
        };
        const optionChange = {
            series: [
                {
                    label: {
                        formatter(params: UnknownData) {
                            let str = "";
                            const item = params.data;
                            try {
                                str = `{a|${item.name}}\n`;
                                str += `{b|${item.value}条(${params.percent}%)}`;
                            } catch (e) {}
                            return str;
                        },
                        rich: {
                            a: {
                                fontSize: 28,
                                lineHeight: 41,
                                color: "#101010"
                            },
                            b: {
                                fontSize: 12,
                                lineHeight: 17,
                                color: "rgb(16, 16, 16)"
                            }
                        }
                    },
                    data: [
                        {
                            value: chartData ? chartData.incomplete : "",
                            name: "进行中",
                            itemStyle: {
                                color: "#2C50C9"
                            }
                        },
                        {
                            value: chartData ? chartData.complete : "",
                            name: "已完成",
                            itemStyle: {
                                color: "#32A78F"
                            }
                        }
                    ]
                }
            ]
        };

        this.setEcharts(
            "missionStatistics",
            option,
            optionChange,
            (myChart: UnknownData) => {
                const index = chartData.incomplete ? 0 : 1;
                myChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0
                });
                myChart.dispatchAction({
                    type: "highlight",
                    dataIndex: index
                });

                myChart.on("mouseover", (e: UnknownData) => {
                    // 鼠标滑入取消整个系列高亮
                    myChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: e.seriesIndex
                    });
                    // 然后高亮鼠标悬停的那块
                    myChart.dispatchAction({
                        type: "highlight",
                        dataIndex: e.dataIndex
                    });
                });

                // 监听鼠标滑出事件
                myChart.on("mouseout", (e: UnknownData) => {
                    // 鼠标滑出取消整个系列所有高亮
                    myChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: e.seriesIndex
                    });
                    // 然后高亮鼠标最后悬停的那块
                    myChart.dispatchAction({
                        type: "highlight",
                        dataIndex: e.dataIndex
                    });
                });
            }
        );
    }

    // 数据量排名e-charts数据处理
    amountRankChart(): void {
        const chartData = this.dataRanking;

        const xAxisData: string[] = [];
        const total: UnknownData = {
            name: "数据量",
            key: "total",
            type: "bar",
            itemStyle: {
                color: "#2C50C9"
            },
            label: {
                show: true,
                position: "top",
                fontSize: 12,
                color: "#000",
                formatter(item: UnknownData) {
                    return item.data === 0 ? "" : item.data;
                }
            },
            data: []
        };
        chartData.forEach(item => {
            xAxisData.push(item.name);
            total.data.push(item.total);
        });
        const option = {
            title: {
                text: [
                    "{a|本科室任务数排名}",
                    "{c| }",
                    "{b|仅统计已完成任务数据}"
                ].join(""),
                textStyle: {
                    rich: {
                        a: {
                            color: "#37383A",
                            fontFamily: "PingFang SC",
                            fontSize: 16,
                            fontWeight: "bold"
                        },
                        b: {
                            color: "#999999",
                            fontFamily: "PingFang SC",
                            fontSize: 12,
                            fontWeight: "400",
                            marginLeft: 10
                        },
                        c: {
                            width: 6
                        }
                    }
                },
                padding: [0, 0, 0, 15]
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                }
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#909399"
                        }
                    },
                    axisLabel: {
                        rotate: 45
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisTick: {
                        // y轴刻度线
                        show: false
                    },
                    splitLine: {
                        // 网格线
                        show: true,
                        lineStyle: {
                            color: "#E4E7ED"
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#909399"
                        }
                    }
                }
            ]
        };
        const optionChange = {
            xAxis: [
                {
                    data: xAxisData
                }
            ],
            series: [total]
        };

        this.setEcharts("amountRank", option, optionChange);
    }

    toTaskList(data: any) {
        localStorage.setItem("childTask", data.childTask);
        this.$router.push({
            name: "TownCreatedAndReceivedDetailAllList",
            query: {
                name: data.formName,
                id: data.id,
                formId: data.formId,
                status: data.fillStatus
            }
        });
    }
}
</script>
<style lang="scss">
.select-status {
    .el-select-dropdown__item {
        padding: 0 20px !important;
    }
}
</style>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.home /deep/ .page-base-body {
    background-color: transparent;
    height: calc(100% - 50px) !important;
}

.header-info {
    width: 100%;
    height: 56px;
    background: #ffffff;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    padding-left: 16px;

    span {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 22px;
        color: #37383a;

        & + span {
            margin-left: 24px;
        }
    }
}

.wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;

    & > div:nth-child(1) {
        width: calc(55% - 5px);
    }

    .right-content {
        width: calc(45% - 5px);
        .collect {
            background-color: #fff;
            margin-bottom: 10px;

            &-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #ecebf2;
                padding: 10px;

                p {
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #37383a;
                    width: 200px;
                }

                .el-input {
                    width: 50%;
                }
            }

            &-content {
                padding: 10px;
                height: 220px;
                overflow-y: scroll;

                ul {
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    li {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 100%;
                        font-size: 14px;
                        color: #37383a;
                        position: relative;

                        & > div {
                            display: flex;
                            justify-content: space-between;

                            p {
                                margin-right: 12px;
                                width: 85px;
                            }

                            ::v-deep {
                                .el-timeline {
                                    width: calc(100% - 90px);

                                    .el-timeline-item:nth-child(1) {
                                        .el-timeline-item__node {
                                            background-color: #de2728;
                                        }
                                    }
                                }

                                .el-timeline-item {
                                    padding-bottom: 0;
                                    height: 30px;
                                    padding-top: 3px;

                                    .el-timeline-item__wrapper {
                                        padding-left: 12px;
                                        width: 100%;

                                        .el-timeline-item__content {
                                            display: flex;
                                            justify-content: space-between;

                                            span.title-name {
                                                width: 30%;
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                cursor: pointer;
                                                &:hover {
                                                    color: #de2728;
                                                    text-decoration: underline;
                                                }
                                            }
                                            span:not(.title-name) {
                                                width: 15%;
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                            }

                                            i {
                                                width: 30%;
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                display: inline-block;
                                                font-style: normal;
                                                font-size: 12px;
                                                margin-left: 6px;
                                                color: #afacac;
                                                text-align: right;
                                            }
                                        }
                                    }

                                    .el-timeline-item__node--normal {
                                        width: 10px;
                                        height: 10px;
                                        left: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &-footer {
                padding: 10px;
                border-top: 1px solid #ecebf2;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .tips-list {
            background-color: #fff;
            .tip-header {
                padding-left: 10px;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 400;
                line-height: 42px;
                color: #37383A;
                border-bottom: 1px solid #F3F3F3;
            }
            .tips-list-content {
                height: 203px;
                overflow-y: auto;
                .item {
                    padding: 10px;
                    border-bottom: 1px solid #F3F3F3;
                    &:hover {
                        background: #FFE4E4;
                    }
                    .top {
                        margin-bottom: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .name {
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            line-height: 20px;
                            color: #37383A;
                        }
                    }
                    .bottom {
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        line-height: 20px;
                        color: #999999;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .people {
                            span:nth-child(1) {
                                margin-right: 40px;
                            }
                        }
                        .time {

                        }
                    }
                }
            }
        }
    }
}

.no-data {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    background: #fff;
    padding: 0 20px;

    .search-input {
        ::v-deep {
            .el-input__inner {
                &:focus {
                    border-color: #dcdfe6;
                }
            }
            .el-input-group__append {
                background: #2c82c9;
                color: #fff;
                border-color: #2c82c9;
                .el-button {
                    &:hover {
                        background: #2c82c9;
                        color: #fff;
                        border-color: #2c82c9;
                    }
                }
            }
        }
    }
}

.info-view {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding-bottom: 70px;

    & > p {
        padding-left: 20px;
        padding-top: 20px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 25px;
        color: #37383A;
        margin-bottom: 43px;
    }

    ul {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0 64px 0 60px;

        li {
            width: 25%;
            display: flex;
            justify-content: center;
            position: relative;
            div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                cursor: pointer;
                p {
                    text-align: center;
                    font-size: 28px;
                    font-weight: bold;
                    color: #37383a;
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                    img {
                        width: 50px;
                        height: 50px;
                        margin-right: 20px;
                    }
                }

                span {
                    font-size: 16px;
                    color: #999999;
                }
                i {
                    position: relative;
                    margin-left: 12px;
                    &::before {
                        content: "";
                        width: 0;
                        height: 0;
                        border-top: 4px solid transparent;
                        border-left: 4px solid #999999;
                        border-bottom: 4px solid transparent;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }
            & + li {
                &::after {
                    content: "";
                    width: 1px;
                    height: 46px;
                    background: #f3f3f3;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
}

.list {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    margin-top: 10px;
    padding-bottom: 50px;

    & > p {
        padding-left: 20px;
        padding-top: 20px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 25px;
        color: #37383A;
        margin-bottom: 25px;
    }

    ul {
        display: flex;
        align-items: center;
        overflow: hidden;
        width: 100%;
        justify-content: space-between;
        padding: 23px 18px;
        background-image: url("~@/assets/home/bgc.png");
        background-position: center;
        background-size: 90% 100%;
        background-repeat: no-repeat;

        li {
            position: relative;
            width: 120px;
            height: 80px;
            padding-left: 12px;
            img {
                width: 120px;
                height: 80px;
                position: absolute;
                left: 0;
                top: 0;
            }
            span {
                position: relative;
                z-index: 2;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                line-height: 20px;
                color: #ffffff;
                display: block;
                margin-top: 8px;
            }
            p {
                position: relative;
                z-index: 2;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                display: inline-block;
                background: #ffffff;
                width: 50px;
                height: 18px;
                line-height: 18px;
                border-radius: 4px;
                text-align: center;
                margin-top: 6px;
                color: #fe6665;
            }
            &:nth-child(2) p {
                color: #459ff7;
            }
            &:nth-child(3) p {
                color: #999999;
            }
            &:nth-child(4) p {
                color: #7b5dff;
            }
            &:nth-child(5) p {
                color: #32a78f;
            }
            &:not(:nth-child(3)) {
                cursor: pointer;
            }
        }
    }
}

::v-deep {
    .el-tabs__nav-wrap::after {
        display: none;
    }

    .el-tabs__item:focus-visible {
        outline: none !important;
    }
}

.e-charts-container {
    padding-top: 10px;
    /deep/ {
        .pbb__search-box .pbb__search-column.fixed-column {
            padding: 10px 8px;
            height: auto;
            display: flex;
            align-items: center;
        }
    }

    .overview-table-box {
        padding: 0 20px 30px;
        background-color: #fff;
    }

    .title {
        padding: 20px 20px 10px;
        margin: 0;
        line-height: 1;
        background-color: #fff;
        font-size: 16px;
        font-weight: 500;
        color: #37383a;
        margin-top: 10px;
    }

    .e-c-b-title {
        span {
            font-size: 12px;
            color: rgb(125, 120, 120);
            margin-left: 10px;
        }
    }

    .date-select {
        margin-left: 10px;
        ::v-deep {
            .el-tabs__nav {
                border-radius: 4px;
                overflow: hidden;
                border: 1px solid #f3f3f3;
                .el-tabs__active-bar {
                    display: none;
                }
            }
            .el-tabs__item {
                text-align: center;
                width: 80px;
                height: 36px;
                line-height: 36px;
                padding: 0;
                transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                &.is-active {
                    background-color: #de2728;
                    color: #fff;
                }
                & + .el-tabs__item {
                    border-left: 1px solid #f3f3f3;
                }
            }

            .el-tabs__header {
                margin-bottom: 0;
            }
        }
    }

    .e-chart-box {
        padding: 0 18px;
        display: flex;
        // height: 300px;
        background-color: #fff;

        & > div {
            flex: 1;
        }

        & > div:nth-child(1) {
            padding-right: 8px;
            padding-top: 12px;
        }

        & > div:nth-child(2) {
            padding-right: 8px;
            padding-left: 8px;
            padding-top: 12px;
        }

        & > div:nth-child(3) {
            padding-left: 8px;
            padding-top: 12px;
        }

        .e-chart {
            width: 100%;
            height: 300px;
            background-color: #fff;
            border: 1px solid #f3f3f3;
            padding-top: 10px;
        }

        .mission-rank {
            .e-c-b-title {
                padding: 10px 18px;
            }
        }

        .e-c-b-title {
            background-color: #fff;
            line-height: 1;
            padding: 10px;
            margin: 0;

            font-size: 16px;
            font-weight: 500;
            color: #37383a;
        }

        .mission-statistics {
            background-color: #fff;
            position: relative;

            & > div {
                display: flex;

                p {
                    font-size: 14px;
                    color: #37383a;
                    line-height: 1;
                    position: relative;
                    padding-left: 12px;
                    &::before {
                        content: "";
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    & + p {
                        margin-top: 20px;
                    }
                    &:nth-child(1)::before {
                        background: #de2728;
                    }
                    &:nth-child(2)::before {
                        background: #2c82c9;
                    }
                    &:nth-child(3)::before {
                        background: #32a78f;
                    }
                }

                & > div:nth-child(2) {
                    padding-top: 25px;
                    position: absolute;
                    left: 25px;
                    top: 40px;
                }
            }
        }
    }
}
</style>
